import { ProForm, ProFormText } from '@ant-design/pro-components';
import { useMount } from 'ahooks';
import { Button, Form, message } from 'antd';
import { useRef, useState } from 'react';

const SceneModal = (props) => {
  // 在这里可以访问传递的数据
  const receivedData = props.data;
  useMount(async () => {
    await initData();
  });
  const preview = useRef(null);
  const [originState, setOriginState] = useState(true);
  const [showButtonState, setShowButtonState] = useState(false);
  const [textSourceList, setTextSourceList] = useState<String[]>([]);
  const [textSourceSelect, setTextSourceSelect] = useState('');
  const [form] = Form.useForm();
  const initData = async () => {
    const allScene = ['text1', 'text2'];
    console.log('allScene', allScene);
    setTextSourceList(allScene);
    if (allScene && allScene.length > 0) {
      setTextSourceSelect('0'); //设置默认sense
    }
  };
  const closeDynamicView = async () => {
    await window.tm?.ipcRenderer.invoke('closeObsModal');
  };
  const dynamicView = async (path, data) => {
    await window.tm?.ipcRenderer.invoke('showObsModal', {
      path: path,
      data: data,
    });
  };

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#2e477e',
      }}
    >
      <div
        style={{
          flex: '1 0 40px',
          display: 'flex',
          justifyContent: 'center',
          width: '100%',
          textAlign: 'center',
        }}
      >
        {originState && (
          <ProForm
            form={form}
            title={'添加新源'}
            submitter={false}
            onFinish={async (values) => {
              console.log(values);
              message.success('提交成功');
            }}
            initialValues={{
              name: receivedData.data.typeData.id.split('_')[0],
            }}
          >
            <ProFormText
              width="md"
              name="name"
              label="请输入源名称"
              placeholder="请输入源名称"
              rules={[{ required: true }]}
            />
          </ProForm>
        )}
      </div>

      <div
        style={{
          height: '40px',
          alignItems: 'center',
          display: 'flex',
          justifyContent: 'flex-end',
          backgroundColor: '#1c295a',
        }}
      >
        <Button
          type="primary"
          style={{ backgroundColor: '#293d76' }}
          onClick={async () => {
            await closeDynamicView();
          }}
        >
          取消
        </Button>
        <Button
          type="primary"
          style={{
            marginRight: '3%',
            marginLeft: '3%',
            backgroundColor: '#293d76',
          }}
          onClick={async () => {
            const values = form.getFieldsValue();
            textSourceList.push(values.name);
            setTextSourceList(textSourceList);
            console.log('textSourceList', textSourceList.toString());
            //创建源
            const data = {
              sceneName: receivedData.data.sceneName,
              id: receivedData.data.typeData.id,
              name: values.name,
            };
            console.log('data', data);
            const result = await window.tm?.ipcRenderer.invoke(
              'createModalSource',
              data,
            );
            console.log('result', result);
            await closeDynamicView();
            await dynamicView(receivedData.data.typeData.path, {
              sceneName: receivedData.data.sceneName,
              id: values.name,
              name: result.name,
              isNew: true,
            });
          }}
        >
          添加源
        </Button>
      </div>
    </div>
  );
};

export default SceneModal;
